<style type="text/css">
    html {
        width: 100%;
        height: 100%;
    }

    body {
        margin: 0;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .parent-package {
        position: relative;
    }

    .parent {
        width: 360px;
        height: 80%;
        text-align: center;
        overflow: auto;
        border: 2px solid darkslategrey;
    }

    .child {
        background-color: darkcyan;
        color: blanchedalmond;
        padding: 2px 1em 0;
        border-top-right-radius: 8px;
        position: absolute;
        bottom: 2px;
        left: 2px;
    }
</style>
<header></header>
<div class="parent-package">
    <div class="parent">
        <p>PARENT</p><hr/>
        <p>PARENT</p><hr/>
        <p>PARENT</p><hr/>
        <p>PARENT</p><hr/>
        <p>PARENT</p><hr/>
        <p>PARENT</p><hr/>
        <p>PARENT</p><hr/>
        <p>PARENT</p><hr/>
        <p>PARENT</p><hr/>
        <p>PARENT</p><hr/>
        <div class="child"><span>child</span></div>
    </div>
</div>
<footer></footer>